<template>
  <a-drawer
    :visible="vdata.visible"
    :title="'商户'+vdata.title"
    width="30%"
    :body-style="{ paddingBottom: '50px',paddingRight:'50px' }"
    :maskClosable="false"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="导入方式" name="type">
            <!-- <a-switch v-model:checked="checked" /> -->
            <a-radio-group v-model:value="vdata.saveObject['type']">
              <a-radio :value="1">文件批量</a-radio>
              <a-radio :value="2">手动输入</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.saveObject['type']=='2'" :span="24">
          <a-form-item label="手动输入" name="groupMchList">
            <a-textarea v-model:value="vdata.saveObject['groupMchList']" placeholder="手动输入商户号，商户号之间用回车隔开" :rows="4" />
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.saveObject['type']=='1'" :span="24">
          <a-form-item name="fileList">
            <template #label>
              <div>
                <span>文件批量</span>
                <a-button type="link" href="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/template/merchantImport.xlsx">下载商户模板</a-button>
              </div>
            </template>
            <a-form-item name="fileList" no-style>
              <a-upload-dragger
                v-model:fileList="vdata.saveObject['fileList']" 
                :action="vdata.action"
                :data="vdata.formParams"
                :maxCount="1"
                accept=".xlsx, .xls"
                name="files"
                :beforeUpload="beforeUpload"
                @change="uploadChange"
              >
                <p class="ant-upload-drag-icon">
                  <InboxOutlined />
                </p>
                <p class="ant-upload-text">拖动到此处上传，或<a>点击上传</a></p>
                <p class="ant-upload-hint">每次只能上传一个文件，限制文件格式为XLS/XLSX。.</p>
              </a-upload-dragger>
            </a-form-item>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.actionType=='1'" :span="24">
          <a-form-item label="是否限制非辐射范围内商户导入：" name="isRadius">
            <!-- <a-switch v-model:checked="checked" /> -->
            <a-radio-group v-model:value="vdata.saveObject['isRadius']">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <span class="gz-tip-text" style="margin-top:0;">选择是的话，非商圈辐射范围内的商户，就无法导入。</span>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
  <!-- 显示导入结果 -->
  <a-modal v-model:visible="vdata.resVisible" :title="`本次商户${vdata.title}记录`">
    <div style="text-align: center;">
      {{ vdata.title }}成功，本次成功{{ vdata.title }}XXX户商户，{{ vdata.title }}失败XXX户
      <br>
      <br>
      <a-button v-if="vdata.actionType=='1'" @click="importResExportFun('1')">{{ vdata.title }}失败名单下载</a-button>
      <a-button v-if="vdata.actionType=='1'" style="margin-left:20px;" @click="importResExportFun('2')">{{ vdata.title }}成功名单下载</a-button>

      <a-button v-if="vdata.actionType=='2'" type="primary" @click="unBindResExportFun">{{ vdata.title }}明细下载</a-button>
      <br>
    </div>

    <template #footer>
      <a-button type="primary" @click="onClose2">确定</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import {ref, reactive, nextTick, getCurrentInstance} from 'vue'
import{$addorUpdataBusiness,$getUploadFormParams}from '@/api/businessCircle/index'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})
  
const vdata : any =  reactive({
  actionType:'',//1.导入 2.解绑
  title:'导入',
  isAdd: true, // 新增 or 修改
  visible: false, // 抽屉开关
  resVisible:false,
  saveObject: {}, // 数据对象
  btnLoading:false,
  rules: {
    groupMchList: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
    fileList: [{ required: true, message: '请上传文件', trigger: 'blur' }]
  }
})


// 表单组件
const infoFormModel = ref()

// 
function beforeUpload(file){
  return $getUploadFormParams(file,'yx').then(res => {
    vdata.action = res.formActionUrl // action 
    vdata.formParams = res.formParams //表单组件 
    vdata.formReqFileUrl = res.ossFileUrl
  })
}
// 文件上传
function uploadChange(info){
  if (!info.file.status) {
    vdata.fileList = []
    return
  }
  if (info.file.status === 'uploading') {
    return
  }
  if (info.file.status === 'error') { // 上传异常
    vdata.saveObject.fileList = []
    $infoBox.message.error('上传异常,请联系系统管理员')
  }
}

// 抽屉显示
const show = (recordId,type) => {
  vdata.actionType = type
  if(vdata.actionType=='2'){
    vdata.title='解绑'
  }
  // 数据清空--添加默认值
  vdata.saveObject = {
    'type': 1,
    isRadius:0,
    groupId:recordId
  }
  
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }
  vdata.visible = true

}
// 表单提交
const onSubmit = () => {
  infoFormModel.value.validate().then(() => {
    let url = ''  // 请求地址
    let reqObject:any = {} // 请求数据
    let type = vdata.saveObject.type
    if(type === 1){ // 文件上传
      url = '/api/marketingGroup/importGroupMch'
      reqObject.url = vdata.formReqFileUrl
      reqObject.groupId = vdata.saveObject.groupId
    }else{  // 手动上传
      url = '/api/marketingGroup/importGroupMchList'
      vdata.saveObject.groupMchList = vdata.saveObject.groupMchList.split('\n')
      reqObject.groupMchList = vdata.saveObject.groupMchList
      reqObject.groupId = vdata.saveObject.groupId
    }
    vdata.btnLoading = true
    $addorUpdataBusiness(url, reqObject).then(res => {
        onClose()
        props.callbackFunc() // 刷新列表
        $infoBox.message.success('导入成功!')
        // vdata.resVisible = true;
    }).finally(() => {
      // 测试
      // vdata.resVisible = true;
      vdata.btnLoading = false
    })
  })
}

// 导入结果下载
const importResExportFun = (type) => {
  // console.log('importResExportFun',type)
}

// 解绑结果下载
const unBindResExportFun = () => {
  // console.log('unBindResExportFun')
}

const onClose = () => {
  vdata.visible = false
}
const onClose2 = () => {
  vdata.resVisible = false
  vdata.visible = false
  props.callbackFunc() // 刷新列表
}


defineExpose({ show })
</script>

